<script setup lang="ts">
import {ref} from "vue";



// eslint-disable-next-line no-undef
const props = defineProps(["size","page","total"])

const currentPage4 = ref(props.page)
const pageSize4 = ref(props.size)

// eslint-disable-next-line no-undef,vue/valid-define-emits
const emits = defineEmits();

const handleSizeChange = (val: number) => {
  pageSize4.value = val
  emits("select",currentPage4.value,pageSize4.value)
}
const handleCurrentChange = (val: number) => {
  currentPage4.value = val
  emits("select",currentPage4.value,pageSize4.value)
}

</script>

<template>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                   :page-sizes="[3,5,10,20]"
                   :small="false"
                   :background="true"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="props.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}</style>